<template>
  <van-nav-bar
      class="title-text nav-bar"
      :title="$t('msg.homeTitle')"
      :border=false
  />
  <div class="default-margin">
    <div class="margin2">
      <van-image
          fit="cover"
          radius="6px"
          height="168px"
          width="100%"
          style="margin-top: 10px;"
          :src="vipData.cardCover"
          @click="toVipDetail">
        <template v-slot:loading>
          <van-loading type="spinner" size="20"/>
        </template>
      </van-image>
      <div class="title-text1 title-text1-margin">{{$t('msg.homeStr1')}}</div>
    </div>
    <van-grid column-num="2" :gutter="6">
      <van-grid-item v-for="item in filmList" :border=false class="image-item">
        <div @click="toDetail(item)">
          <van-image
              fit="cover"
              radius="6px"
              height="176px"
              width="100%"
              :src="item.cinemaCover">
            <template v-slot:loading>
              <van-loading type="spinner" size="20"/>
            </template>
          </van-image>
          <div class="image-text">
            {{ item.cinemaName }}
          </div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>

</template>

<script>
import {getHomeList, getVipImage} from "@/http/api";
import {isNeedOpenCard} from "@/utils/utils";
import {showToast} from "vant";

export default {
  name: 'Home',
  data() {
    return {
      filmList: [],
      vipData: {},
    }
  },
  mounted() {
    this.getHomeImage()
    this.getFilmList()
  },
  methods: {
    async getHomeImage() {
      try {
        let dataList = await getVipImage()
        this.vipData = dataList.content[0]
      } catch (e) {

      }
    },
    async getFilmList() {
      try {
        let data = await getHomeList()
        this.filmList = data.content
      } catch (e) {
        console.log(e)
      }
    },
    toDetail(item) {
      console.log(item)
      this.$router.push({
        path: '/film-detail',
        query: {
          id: item._id,
          name: item.cinemaName
        }
      })
    },
    toVipDetail() {
      if (isNeedOpenCard()) {
        this.$router.push(`/vip-detail/${this.vipData._id}`)
      }
    }
  }
}
</script>

<style scoped>

.default-margin {
  padding: 0px 10px;
}

.margin2 {
  padding-right: 6px;
  padding-left: 6px;
}

.title-text1-margin {
  margin-top: 18px;
  margin-bottom: 10px;
  display: flex;
}

.image-item {
  --van-grid-item-content-padding: 0px;
  --van-grid-item-content-background: #00000000;
}

.image-text {
  position: relative;
  height: 176px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: -182px;
}

</style>
